<template>
	<view class="content">
		<u-navbar title="商品详情"></u-navbar>
		<!-- 商品轮播图 -->
		<view class="banner-wrapper">
			<swiper class="banner" @change="bannerChange">
				<swiper-item class="item">
					<image class="img" :src="goodInfo.mainImgUrl" mode="aspectFill"></image>
					<view class="video-bg" @click.stop="onVideo"><text class="iconfont icon-bofang"></text></view>
				</swiper-item>
				<swiper-item class="item" v-for="(item, index) in goodInfo.imgUrlList" :key="index" @click="onBanner(index)">
					<image class="img" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="num" v-if="goodInfo.imgUrlList">{{ bannerIndex }} / {{ goodInfo.videoUrl ? goodInfo.imgUrlList.length + 1 : goodInfo.imgUrlList.length }}</view>
		</view>
		<!-- 商品价格跟销量介绍 -->
		<view class="goods-item">
			<view class="goods-price">
				<view class="price">
					<view class="new-price">￥15.00</view>
					<view class="old-price">￥45.00</view>
				</view>
				<view class="Sold">已售1026件</view>
			</view>
			<view class="title ">
				搜乐护龈健齿酷爽齿酷爽搜乐护龈健齿酷爽齿酷爽搜乐护龈健搜乐护龈健齿酷爽齿酷爽搜乐护龈健齿酷爽齿酷爽搜乐护龈健搜乐护龈健齿酷爽齿酷爽搜乐护龈健齿酷爽齿酷爽搜乐护龈健搜乐护龈健齿酷爽齿酷爽搜乐护龈健齿酷爽齿酷爽搜乐护龈健搜乐护龈健齿酷爽齿酷爽搜乐护龈健齿酷爽齿酷爽搜乐护龈健
			</view>
		</view>
		<!-- 商品规格展示 -->
		<view class="goods-Spec">
			<view class="Spec-item">
				<view class="title">
					规格
					<text class="title-text">150g</text>
				</view>
				<view class="right-item">></view>
			</view>
			<view class="Spec-item">
				<view class="title">
					邮费
					<text class="title-text">包邮</text>
				</view>
				<view class="right-item">></view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="title"><text class="text">商品详情</text></view>
		<view class="detail-wrapper"><u-parse :html="goodInfo[0].detailImgUrl"></u-parse></view>
		<!-- 底部购买 -->
		<view class="bottom-button">
			<view class="bottom-left">
				<view class="button-left" @click="onhome">
					<image src="../../static/imgs/sy.png" class="img"></image>
					<text class="button-text">首页</text>
				</view>
				<view class="button-left" @click="oncart">
					<image src="../../static/imgs/gw.png" class="img"></image>
					<text class="button-text">购物车</text>
				</view>
			</view>
			<view class="bottom-right">
				<button class="button-left" @click="onaddcart">加入购物车</button>
				<button class="button-right" @click="onpayment">立即购买</button>
			</view>
		</view>
		<!-- 弹窗 -->
		<popup ref="Popup"></popup>
		<!-- 点击播放视频 -->
		<video-player ref="player" src="goodInfo.videoUrl"></video-player>
	</view>
</template>

<script>
import Popup from './components/popup.vue';
import VideoPlayer from '@/components/video-player/index.vue';
import { mapGetters } from 'vuex';
export default {
	components: {
		Popup,
		VideoPlayer
	},
	data() {
		return {
			show: false, //提示安装qq模态框状态
			goodInfo: [
				{
					mainImgUrl: 'https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg',
					imgUrlList: 'https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg',
					detailImgUrl:
						'"<p><img src="https://peonyoss.longchimudan.com/peony/goods/87dc8fdf9e5242ecb9bbb7395511f087.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/d982ce6553c44bca971d2f3d9af31d74.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/4bbb492a35ec4786b43a2cc8895b75b0.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/3df045c45218417cb8e9859ea2869173.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/4cfd541ebd99469286166c87abadf247.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/cf7029b3942343538c0a7790f71cdbbf.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/b7ffaca371b64529b9a38b3e6357e463.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/2eb82ba02d0f41e38c5548cdd448438b.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/95c756620841455fbcb02b327d37daf7.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/20a310d86e144ab6b59da56f47b9fe16.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/47909423d2a54325abc6539ef753c8ab.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/a1bd899cb1f14845a85333c70b31b05d.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/8007f8f3fa0b4325bd17b2c4fc29b5af.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/91507c83d7094d0ca9ecc4509deff3d0.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/9f36713d2e974606bb29acb088d94adb.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/78a8958badb14ce698004780414a96af.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/7e93d171eed143369253a452adb8d267.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/8e805a0bcdb14639aa7805c9d1880b1d.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/cabfb99c56a740c1af644a365793db19.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/eb5a4e803916418eae43bedd2c8156ce.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/c7fd83b8e3c1447183ee487e988afd3b.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/4aa8ebea01d04b6caa6dd146e89aeb72.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/37bcbd21bc8e40e5afbe082878ff9152.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/8ea0e3a07ef94896a6b357c3e5f1e66f.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/9ffb70bfe1824cea9802bc829f843dac.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/c8ec5e748d4d4a6c874352e24932834c.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/b3a538c953ac43bda56069f93b19802b.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/03209b7b97cd401584320a70ee67dca4.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/1775dd594ed1487691564b91fdd55900.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/9d571d8650214f3db6d3912f3964095a.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/942e2ccc323c4273b7d6d7e9cb318790.jpg"></p>"'
				},
				{
					mainImgUrl: 'https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg',
					imgUrlList: 'https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg'
				}
			]
		};
	},
	methods: {
		// 播放视频
		onVideo() {
			this.$refs['player'].show();
		},
		//轮播图滚动
		bannerChange(e) {
			console.log(e);
		},
		//查看轮播图
		onBanner(current) {
			let arr = this.goodInfo.imgUrlList.map(v => {
				return this.imgBaseUrl + v;
			});
			uni.previewImage({
				urls: arr,
				current: current
			});
		},
		//跳转首页
		onhome() {
			uni.switchTab({
				url: '/pages/index/index'
			});

			console.log('跳转首页');
		},
		//跳转购物车
		oncart() {
			uni.switchTab({
				url: '/pages/cart/index'
			});
			console.log('去购物车');
		},
		onaddcart() {
			uni.switchTab({
				url: '/pages/cart/index'
			});
			console.log('加入购物车');
		},
		onpayment() {
			this.$refs['Popup'].show();
			console.log('支付订单');
		}
	}
};
</script>

<style lang="scss">
@import '@/styles/mixin.scss';
.content {
	min-height: 100%;
	background-color: #f5f5f5;
	.banner-wrapper {
		position: relative;
		height: 760rpx;
		.banner {
			height: 100%;
			background-color: #f5f5f5;
		}
		.item {
			position: relative;
			.video-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(0, 0, 0, 0.4);
			}

			.iconfont {
				color: #ffffff;
				font-size: 82rpx;
			}
		}

		.img {
			width: 100%;
			height: 100%;
		}

		.num {
			font-size: 20rpx;
			width: 70rpx;
			height: 35rpx;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			color: #fff;
			text-align: center;
			padding: 5rpx 0;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.share {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 50%;
			text-align: center;

			&:active {
				opacity: 0.7;
			}

			.iconfont {
				color: #f1f1f1;
			}
		}
	}

	.goods-item {
		padding: 10rpx;
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: #ffffff;
		.goods-price {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: baseline;
			.price {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				padding: 10rpx;
				.new-price {
					font-size: 46rpx;
					font-weight: bold;
					color: #f53942;
				}
				.old-price {
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #cccccc;
				}
			}
			.Sold {
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
				padding-right: 20rpx;
			}
		}
		.title {
			width: 480rpx;
			margin: 10rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
		}
	}
	.goods-Spec {
		padding: 10rpx;
		margin: 10rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		.Spec-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: baseline;
			border-bottom: 1rpx solid #eeeeee;
			padding: 10rpx;
			.title {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
			}
			.title-text {
				padding-left: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #888888;
			}
			.right-item {
				color: #cccccc;
			}
		}
	}
	.title {
		margin: 20rpx;
		font-weight: bold;
		text-align: center;
		.text {
			font-size: 26rpx;
			color: #222222;
		}
	}
	.detail-wrapper {
		image,
		img {
			display: block;
			max-width: 100%;
		}
	}
	.bottom-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 10rpx;
		background: #ffffff;
		.bottom-left {
			padding: 15rpx;
			display: flex;
			.button-left {
				width: 85rpx;
				height: 86rpx;
				flex-direction: column;
				display: flex;
				.img {
					width: 40rpx;
					height: 42rpx;
				}
				.button-text {
					font-size: 20rpx;
					font-weight: 400;
					color: #222222;
				}
			}
		}
		.bottom-right {
			display: flex;
			.button-left {
				height: 78rpx;
				width: 240rpx;
				background: #f5b539;

				font-weight: bold;
				font-size: 28rpx;
				color: #f2f2f2;
				border-radius: 39rpx 0 0 39rpx;
			}
			.button-right {
				font-weight: bold;
				font-size: 28rpx;
				color: #f2f2f2;
				border-radius: 0 39rpx 39rpx 0;
				height: 78rpx;
				width: 240rpx;
				background: #f53942;
			}
		}
	}
}
</style>
